<template>
  <NavBar></NavBar>
  <div class="container">
    <el-row :gutter="16" class="row">
      <el-col :span="contentSpan" :offset="0" ref="content">
        <div>
          <el-card shadow="always" :body-style="{ padding: '0px' }" class="card">
            <!-- 正文 -->
            <div>
              <ArticleMessage :Message="Message" class="ArticleMessage"></ArticleMessage>
              <el-skeleton :loading="loading" animated>
                <template #template>
                  <div class="skeleton">
                    <el-skeleton :rows="5" />
                    <el-skeleton-item
                      variant="image"
                      style="width: 240px; height: 240px; margin: 16px 0px"
                    />
                    <el-skeleton :rows="2" />
                  </div>
                </template>
                <template #default>
                  <PreviewMarkDown
                    :FilePath="Message.article_path"
                    class="PreviewMarkDown"
                  ></PreviewMarkDown>
                </template>
              </el-skeleton>
            </div>
          </el-card>
          <el-card
            shadow="always"
            class="comments-area"
            :body-style="{ padding: '0px' }"
            :fit="loading"
          >
            <div>
              <!-- 评论输入组件 -->
              <CommentInput class="comment-input" :articleId="this.$route.params.id"></CommentInput>
              <h5 class="comments-Length">{{ Comments.length }} 评论</h5>
              <ul>
                <li v-for="(item, index) in Comments" :key="index">
                  <CommentsItem :CommentMessage="item"></CommentsItem>
                </li>
              </ul>
            </div>
          </el-card>
        </div>
      </el-col>

      <el-col :md="6" :lg="6" class="hidden-sm-and-down" ref="aside">
        <!-- 侧边栏 -->
        <div>
          <UserMessage></UserMessage>
          <Catalog></Catalog>
        </div>
      </el-col>
    </el-row>
    <!-- 返回顶部 -->
    <el-backtop />
  </div>
  <Footer class="footer"></Footer>
</template>

<script>
import ArticleMessage from "@/components/Article/ArticleMessage.vue";
import PreviewMarkDown from "@/components/Article/PreviewMarkDown.vue";
import UserMessage from "@/components/Article/UserMessage.vue";
import CommentInput from "@/components/common/CommentInput.vue";
import Footer from "@/components/common/Footer.vue";
import Catalog from "@/components/Article/Catalog.vue";
import CommentsItem from "@/components/common/CommentItem.vue";
import NavBar from "@/components/NavBar.vue";
export default {
  data() {
    return {
      Message: {},
      loading: true,
      contentSpan: 18,
      Comments: [],
    };
  },
  methods: {},
  props: {},
  components: {
    ArticleMessage,
    PreviewMarkDown,
    UserMessage,
    CommentInput,
    Footer,
    Catalog,
    CommentsItem,
    NavBar,
  },
  async created() {
    //加载文章
    const response = await this.$http.get("/api/getArticle/" + this.$route.params.id);
    this.Message = response.data.data;
    this.loading = false;
    //加载评论列表
    const { res, data } = await this.$http.get("/api/getArticleComments/" + this.$route.params.id);
    this.Comments = data.data.comments;
  },
  mounted() {
    window.onresize = () => {
      var width = document.documentElement.clientWidth;
      if (width < 992) {
        this.$refs.aside.style = "display:none";
        this.contentSpan = 24;
      } else {
        this.contentSpan = 18;
      }
    };
  },
};
</script>

<style scoped>
.container {
  margin: 10px 10%;
}

.row,
.card {
  height: 100%;
}
.PreviewMarkDown {
  margin-top: 10px;
  height: 100%;
}
.skeleton {
  margin: 16px;
}
.ArticleMessage {
  margin: 0px;
}
.comments-area {
  margin: 16px auto;
}
.comment-input {
  margin: 16px;
}
.footer {
  margin: 0px;
}
li,
ul {
  list-style: none;
  padding: 0px;
}
ul {
  padding-left: 16px;
}
.comments-Length {
  margin-left: 16px;
  font-size: 1.8rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #34495e;
}
</style>
